使用VScode的PicGo插件搭建基于github的图床

详细的搭建云图床教学

前言

非众所周知，我是非常喜欢在笔记里面放截图的。之前我的markdown笔记里的图片都是放在和md文件相同的路径下，markdown代码像这样:

这倒还好，主要问题是每篇笔记都需要放在一个文件夹里，又由于我使用不同插件进行图片粘贴，于是一篇带图片的笔记文件长这样：

笔记图片添加方便、不影响笔记查看、图片文件都在本地倒也安心。但是当需要经常分享自己的markdown文件的时候，这样的粘贴图片方式就不方便了，要把文件夹压缩在发送，那也太不优雅了。

那就搭建一个自己的线上图床。查看我markdown文件的朋友们都可以通过图片链接访问我的线上图床看到我的图片。

本博客环境：

• 在VScode里编写markdown代码（也可以是Typora，Obsidian等）
• 使用PicGo插件（也可以是PicGo客户端），
• 搭建基于github的图床（也可以是阿里云，七牛云等）。

建立github共有仓库作为图床

下载PicGo插件并做相关配置

打开PicGo的插件设置

关联图床的配置

逐个解释：

• Current:填github
• Branch:填主分支即可，若主分支是master就填master
• Custom Url: https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名 如 https://cdn.jsdelivr.net/gh/ShiHantian/image_host@main
• Path:是指在仓库里面的路径。我是新建了一个名为blog的文件夹专门放博客图片，于是填写 blog/ 注意要有斜杠才会放在这个文件夹里面
• Repo: 用户名/仓库名
• Token:进入链接https://github.com/settings/tokens获取。

如何获取Token

点击Generate new token

我们希望生成有效时间较长的token，否则总是更新PicGo配置会麻烦，但我们希望该token仅对图床仓库有效，否则有效时间很长的token会带来一些安全隐患。

于是使用Beta版本的’New fine-grained personal access token’

我原来年限放的很长，但是要求我不得超过一年，于是改成 ‘2015/01/04’

往下拉，Permissions可以很细地调，我们把Contents的许可改成Read and write即可。

点击generate生成

复制Token。注意Token只会展示一次，可以粘贴到记事本上做一个暂时的保存，或直接粘贴到PicGo扩展的配置里。

图片输出和上传格式配置

输出格式

就是自动粘贴到markdown代码文件里的局部图片代码，效果如：

我的设置为：

<p align="center"> <img src="${url}" alt="${uploadedName}" width=70%" /> </p>

其中使用了 ${url} ${uploadedName} 这样的动态占位，还有别的动态占位可以选择。我使用的是markdown兼容的html语法来表示图片，这样可以对图片的宽度位置等有一个更好的控制。也可以采用markdown最基本的图片语法，即：

![${uploadedName}](${url})

图片文件名格式

是对上传的图片的命名，效果如：

我的设置为：

${mdFileName}-${dateTime}${extName}

即‘笔记文件名-日期时间-图片后缀名’，也可根据配置页面的选项进行diy

如何使用

1. 当你正在VScode里快乐地编写markdown笔记代码
2. 复制想添加的图片到剪贴板
3. 将光标放在希望放置图片代码的位置
4. 默认快捷键 Ctrl+Alt+U, 同时完成图片上传和代码输出

References

• PicGo官方文档